



<template>
  <div class="shopping-cart">
    <el-row :gutter="20">
      <el-col :span="12">
        <h3>好物加购</h3>
        <el-table :data="products" style="width: 100%">
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.image" alt="Product Image" style="width: 50px; height: 50px;">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="addToCart(scope.row)">加入购物车</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">


        <h3>购物车</h3>
        <el-table :data="cart" style="width: 100%">
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.image" alt="Product Image" style="width: 50px; height: 50px;">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="removeFromCart(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="total">
          总价: {{ totalPrice }}
        </div>
        <el-button type="primary" @click="checkout">结算</el-button>
      </el-col>
    </el-row>
  </div>

</template>


<script>

export default {
  name: "ShoppingCart",
  data() {
    return {
      products: [
        { name: '佳能相机', price: 4000, image: 'https://encrypted-tbn2.gstatic.com/shopping?q=tbn:ANd9GcQs_VEsV3N1wSPk-TgMdlt3qkRWptxdiieDy_9uC-Xnr8DicCQbOMhA-ayeD9GxK6qALjl2XreTaeUezx-FODRvCfAPFmT4BA&usqp=CAE' },
        { name: '插画', price: 200, image: 'https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcQhX_4sWe4HI1i_Bwzm9dKHcVvdUsAHzr4sYolVAdlVkIVKZwykURKFC2l2e3UTDFa2wi4z_xGyKyrYcda6cSa9pr6n0GTQkb5vavGTULiF5xmKO4KtIuYU&usqp=CAE' },
        { name: '来自庭院的邀请', price: 300, image: 'https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcTdsig5Pff0SRN-6gzZ8MY3Va6_-G2AEzd4rBeoOaZHnYdWXd56WE2qFSIdvPss72E2B4U8KsXOcpOQUl7jxD3uVSKX28bk6CSsRHf1M7Ga&usqp=CAE' }
      ],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    addToCart(product) {
      const cartItem = this.cart.find(item => item.name === product.name);
      if (cartItem) {
        cartItem.quantity++;
      } else {
        this.cart.push({ ...product, quantity: 1 });
      }
    },
    removeFromCart(product) {
      const index = this.cart.findIndex(item => item.name === product.name);
      if (index !== -1) {
        if (this.cart[index].quantity > 1) {
          this.cart[index].quantity--;
        } else {
          this.cart.splice(index, 1);
        }
      }
    },
    checkout() {
      this.$message({
        message: '结算成功',
        type: 'success'
      });
      this.cart = [];
    }
  }
}
</script>



<style scoped>
.shopping-cart {
  padding: 20px;
}
.total {
  margin-top: 20px;
  font-weight: bold;
}
</style>
